<template>
    <div>
        <!-- <slot></slot> -->
        <!-- <hr> -->
        <header>
            <slot name="heager"></slot>
        </header>
        <footer>
            <slot name="footer"></slot>
        </footer>
        <hr>
        <main>
            <slot :message="'helloworld'" :value="'app'"></slot>
        </main>
        <hr>
        <main>
            <slot :name="slotName"></slot>
        </main>
        <slot name="abc">我是子组件的默认插座内容</slot>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const slotName=ref('dynamicSlotName')
</script>